﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<GabageFactory.Models.PositionPicture>" %>
<%@ Import Namespace="System.Collections.Generic" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	上传图片
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        function setCenter(Xelement) {
            var parent = Xelement.parentNode;
            parent.style.position = "relative";
            Xelement.style.position = "absolute";
            var left = (parent.clientWidth - Xelement.clientWidth) / 2;
            var top = (parent.clientHeight - Xelement.clientHeight) / 2;
            Xelement.style.left = left + "px";
            Xelement.style.top = top + "px";
        }
    </script>
    
    <% 
        Position position = (Position)ViewData["position"];
        using (Html.BeginForm())
    {%>
        <%= Html.ValidationSummary(true) %>
        <%= Html.Hidden("Id", Model.Id)%>
            
    <table cellpadding="4" cellspacing="0" class="com_detail_table" style="width:756px;">
        <tr>
            <th colspan="2">上传图片</th>
        </tr>
        <tr>
            <td class="lab" style="width:90px;"><%=position.Type == 1 ? "堆场" : "尾矿库" %>名称：</td>
            <td><%=ViewData["stackName"]%></td>
        </tr>
        <tr>
            <td class="lab">位置名称：</td>
            <td><%=position.Name%></td>
        </tr>
        <tr>
            <td class="lab">位置描述：</td>
            <td>
                <%=position.Description %>
            </td>
        </tr>
        <tr>
            <td class="lab">上传日期：</td>
            <td><%=Html.TextBox("Date", Model.Date.ToString("yyyy-MM-dd"))%></td>
        </tr>
        <tr>
           <td class="lab">现场图片：</td>
           <td>
                <div id="addPicButton"><input type="file" name="file_upload" id="file_upload" /></div>
           </td>
        </tr>
        <tr>
           
           
           
           <td class="lab">&nbsp;</td>
           <td colspan="7" id="pics">
                <div id="pic1Area" style="<% if (string.IsNullOrEmpty(Model.Pic1)) {%>display:none;<%} %>clear:both;margin-top:10px; padding:5px 4px 0px 4px; border:1px solid #e4e4e4; overflow:hidden; zoom:1;background-color:#efefef;">
                  <input type="hidden" id="picPath1" name="picPath1" value="<%=Model.Pic1 %>" />
                  <div style="border:1px solid #e4e4e4;float:left;width:100px;height:75px;text-align:center;line-height:75px;"><img id="pic1" src="<% if (string.IsNullOrEmpty(Model.Pic1)) {%>../../Content/empty.png<%}else{ %><%=Url.Content(Model.Pic1) %><%} %>" alt="" onload="setCenter(this)" class="thumbnail" /></div>
                  <div style="margin-left:10px;float:left">
                      <div style="float:left"><textarea id="picDes1" name="picDes1" rows="5" cols="48" style="height:70px"><%= Model.PicDesc1%></textarea></div>
                      <div style="float:left">
                          <p style=" margin-bottom:10px;">
                            <input type="button" class="uploadify-button2" value="删  除" onclick="delPic(1);" />
                          </p>
                          <input type="file" name="file_upload1" id="file_upload1" />
                      </div>
                  </div>
                </div>
                <div id="pic2Area" style="<% if (string.IsNullOrEmpty(Model.Pic2)) {%>display:none;<%} %>clear:both;margin-top:10px; padding:5px 4px 0px 4px; border:1px solid #e4e4e4; overflow:hidden; zoom:1;background-color:#f4f4f4;">
                  <input type="hidden" id="picPath2" name="picPath2" value="<%=Model.Pic2 %>" />
                  <div style="border:1px solid #e4e4e4;float:left;width:100px;height:75px;text-align:center;line-height:75px;"><img id="pic2" src="<% if (string.IsNullOrEmpty(Model.Pic2)) {%>../../Content/empty.png<%}else{ %><%=Url.Content(Model.Pic2) %><%} %>" alt="" onload="setCenter(this)" class="thumbnail" /></div>
                  <div style="margin-left:10px;float:left">
                      <div style="float:left"><textarea id="picDes2" name="picDes2" rows="5" cols="48" style="height:70px"><%= Model.PicDesc2%></textarea></div>
                      <div style="float:left">
                        <p style=" margin-bottom:10px;">
                            <input type="button" class="uploadify-button2" value="删  除" onclick="delPic(2);" />
                        </p>
                        <input type="file" name="file_upload2" id="file_upload2" />
                      </div>
                  </div>
                </div>
                <div id="pic3Area" style="<% if (string.IsNullOrEmpty(Model.Pic3)) {%>display:none;<%} %>clear:both;margin-top:10px; padding:5px 4px 0px 4px; border:1px solid #e4e4e4; overflow:hidden; zoom:1;background-color:#efefef;">
                  <input type="hidden" id="picPath3" name="picPath3" value="<%=Model.Pic3 %>" />
                  <div style="border:1px solid #e4e4e4;float:left;width:100px;height:75px;text-align:center;line-height:75px;"><img id="pic3" src="<% if (string.IsNullOrEmpty(Model.Pic3)) {%>../../Content/empty.png<%}else{ %><%=Url.Content(Model.Pic3) %><%} %>" alt="" onload="setCenter(this)" class="thumbnail" /></div>
                  <div style="margin-left:10px;float:left">
                      <div style="float:left"><textarea name="picDes3" id="picDes3" rows="5" cols="48" style="height:70px"><%= Model.PicDesc3%></textarea></div>
                      <div style="float:left">
                        <p style=" margin-bottom:10px;">
                            <input type="button" class="uploadify-button2" value="删  除" onclick="delPic(3);" />
                        </p>
                        <input type="file" name="file_upload3" id="file_upload3" />
                      </div>
                  </div>
                </div>
                <div id="pic4Area" style="<% if (string.IsNullOrEmpty(Model.Pic4)) {%>display:none;<%} %>clear:both;margin-top:10px; padding:5px 4px 0px 4px; border:1px solid #e4e4e4; overflow:hidden; zoom:1;background-color:#f4f4f4;">
                  <input type="hidden" id="picPath4" name="picPath4" value="<%=Model.Pic4 %>" />
                  <div style="border:1px solid #e4e4e4;float:left;width:100px;height:75px;text-align:center;line-height:75px;"><img id="pic4" src="<% if (string.IsNullOrEmpty(Model.Pic4)) {%>../../Content/empty.png<%}else{ %><%=Url.Content(Model.Pic4) %><%} %>" alt="" onload="setCenter(this)" class="thumbnail" /></div>
                  <div style="margin-left:10px;float:left">
                      <div style="float:left"><textarea name="picDes4" id="picDes4" rows="5" cols="48" style="height:70px"><%= Model.PicDesc4%></textarea></div>
                      <div style="float:left">
                        <p style=" margin-bottom:10px;">
                            <input type="button" class="uploadify-button2" value="删  除" onclick="delPic(4);" />
                        </p>
                        <input type="file" name="file_upload4" id="file_upload4" />
                      </div>
                  </div>
                </div>
           </td>
        </tr>
    </table>
    
    <div class="submit_btn_area" style="margin-left:104px;">
        <input type="submit"id="submit" onclick="return validateForm();" value="提 交" />
    </div>
    <% } %>



    <script type="text/javascript" src="../../Scripts/jquery.uploadify-3.1.min.js"></script>
    <script type="text/javascript" language="javascript">
        $('#Date').datepicker({
            dateFormat: 'yy-mm-dd'
        });
        
        var picNum = <%=Model.PicNum %>;

        var picFlags = [<%if(string.IsNullOrEmpty(Model.Pic1)) {%>false<%}else{ %>true<%} %>,<%if(string.IsNullOrEmpty(Model.Pic2)){%>false<%}else{ %>true<%} %>,<%if(string.IsNullOrEmpty(Model.Pic3)){ %>false<%}else{ %>true<%} %>,<%if(string.IsNullOrEmpty(Model.Pic4)){ %>false<%}else{ %>true<%} %>];

        $(function () {
            $("#file_upload").uploadify({
                'fileObjName': 'file',
                'multi': false,
                'buttonText': '添加图片',
                'buttonClass': 'submit_btn_area',
                'fileSizeLimit': '200KB',
                'fileTypeDesc': 'Jpeg Files',
                'fileTypeExts': '*.jpeg; *.jpg',
                'swf': '<%=Url.Content("~/Content/uploadify.swf") %>',
                'uploader': '<%=Url.Content("~/Position/FileUpload") %>',
                'onUploadSuccess': function (file, data, response) {
                    var result = eval("(" + data + ")");
                    if (result.error != "") {
                        alert(result.error);
                        return;
                    }
                    showPic(result.url);
                },
                'onUploadError': function (file, errorCode, errorMsg, errorString) {
                    alert('添加图片失败，请重新添加');
                }

            });

            $("#file_upload1").uploadify({
                'fileObjName': 'file',
                'multi': false,
                'buttonText': '重新上传',
                'buttonClass': 'submit_btn_area',
                'fileSizeLimit': '200KB',
                'fileTypeDesc': 'Jpeg Files',
                'fileTypeExts': '*.jpeg; *.jpg',
                'swf': '<%=Url.Content("~/Content/uploadify.swf") %>',
                'uploader': '<%=Url.Content("~/Position/FileUpload") %>',
                'onUploadSuccess': function (file, data, response) {
                    var result = eval("(" + data + ")");
                    if (result.error != "") {
                        alert(result.error);
                        return;
                    }
                    replacePic(1, result.url);
                },
                'onUploadError': function (file, errorCode, errorMsg, errorString) {
                    alert('添加图片失败，请重新添加');
                }

            });

            $("#file_upload2").uploadify({
                'fileObjName': 'file',
                'multi': false,
                'buttonText': '重新上传',
                'buttonClass': 'submit_btn_area',
                'fileSizeLimit': '200KB',
                'fileTypeDesc': 'Jpeg Files',
                'fileTypeExts': '*.jpeg; *.jpg',
                'swf': '<%=Url.Content("~/Content/uploadify.swf") %>',
                'uploader': '<%=Url.Content("~/Position/FileUpload") %>',
                'onUploadSuccess': function (file, data, response) {
                    var result = eval("(" + data + ")");
                    if (result.error != "") {
                        alert(result.error);
                        return;
                    }
                    replacePic(2, result.url);
                },
                'onUploadError': function (file, errorCode, errorMsg, errorString) {
                    alert('添加图片失败，请重新添加');
                }

            });

            $("#file_upload3").uploadify({
                'fileObjName': 'file',
                'multi': false,
                'buttonText': '重新上传',
                'buttonClass': 'submit_btn_area',
                'fileSizeLimit': '200KB',
                'fileTypeDesc': 'Jpeg Files',
                'fileTypeExts': '*.jpeg; *.jpg',
                'swf': '<%=Url.Content("~/Content/uploadify.swf") %>',
                'uploader': '<%=Url.Content("~/Position/FileUpload") %>',
                'onUploadSuccess': function (file, data, response) {
                    var result = eval("(" + data + ")");
                    if (result.error != "") {
                        alert(result.error);
                        return;
                    }
                    replacePic(3, result.url);
                },
                'onUploadError': function (file, errorCode, errorMsg, errorString) {
                    alert('添加图片失败，请重新添加');
                }

            });

            $("#file_upload4").uploadify({
                'fileObjName': 'file',
                'multi': false,
                'buttonText': '重新上传',
                'buttonClass': 'submit_btn_area',
                'fileSizeLimit': '200KB',
                'fileTypeDesc': 'Jpeg Files',
                'fileTypeExts': '*.jpeg; *.jpg',
                'swf': '<%=Url.Content("~/Content/uploadify.swf") %>',
                'uploader': '<%=Url.Content("~/Position/FileUpload") %>',
                'onUploadSuccess': function (file, data, response) {
                    var result = eval("(" + data + ")");
                    if (result.error != "") {
                        alert(result.error);
                        return;
                    }
                    replacePic(4, result.url);
                },
                'onUploadError': function (file, errorCode, errorMsg, errorString) {
                    alert('添加图片失败，请重新添加');
                }

            });
        });

        function delFile(filePath) {
            $.ajax({  
                type: "POST",  
                url: '<%=Url.Content("~/Position/DelFile") %>',  
                data: { "file": filePath }
            }).done(function( msg ) {});
        }

        function delPic(index) {
            picNum--;
            picFlags[index - 1] = false;
            $("#pic" + index + "Area").css("display", "none");
            $("#pic" + index).attr("src", "../../Content/empty.png");
            delFile($("#picPath" + index).val());
            $("#picPath" + index).val("");
            $("#picDes" + index).val("");
            $("#addPicButton").css("display", "");
        }

        function showPic(url) {
            picNum++;
            var i = 0;
            for (i = 0; i < 4; i++) {
                if (picFlags[i] == false) {
                    picFlags[i] = true;
                    $("#pic" + (i + 1) + "Area").css("display", "block");
                    $("#pic" + (i + 1)).attr("src", url);
                    $("#picPath" + (i + 1)).val(url);
                    break;
                }
            }

            if (picNum >= 4) {
                $("#addPicButton").css("display", "none");
            }
        }

        function replacePic(index, url) {
            $("#pic" + index).attr("src", url);
            $("#picPath" + index).val(url);
        }

        function validateForm() {
            return true;
        }
    </script>
</asp:Content>
